<script setup lang="ts">
// ... 保持之前的 script 部分不变
</script>

<template>
  <div class="page-container contact-page">
    <section class="page-header">
      <h1>联系我们</h1>
      <p class="subtitle">有任何问题都可以联系我们，我们会尽快回复</p>
    </section>

    <div class="container">
      <div class="contact-content">
        <div class="contact-info">
          <div class="info-card">
            <div class="info-item">
              <i class="fas fa-map-marker-alt"></i>
              <div class="info-text">
                <h3>地址</h3>
                <p>北京市朝阳区xxx街道xxx号</p>
              </div>
            </div>
            
            <div class="info-item">
              <i class="fas fa-phone-alt"></i>
              <div class="info-text">
                <h3>电话</h3>
                <p>+86 10 1234 5678</p>
              </div>
            </div>
            
            <div class="info-item">
              <i class="fas fa-envelope"></i>
              <div class="info-text">
                <h3>邮箱</h3>
                <p>contact@example.com</p>
              </div>
            </div>
          </div>

          <div class="map-container">
          </div>
        </div>

        <div class="contact-form-container">
          <h2>发送消息</h2>
          <form class="contact-form" @submit.prevent="handleSubmit">
            <div class="form-grid">
              <BaseInput
                v-model="form.name"
                label="姓名"
                placeholder="请输入您的姓名"
                required
              />
              
              <BaseInput
                v-model="form.email"
                type="email"
                label="邮箱"
                placeholder="请输入您的邮箱"
                required
              />
            </div>
            
            <BaseInput
              v-model="form.subject"
              label="主题"
              placeholder="请输入主题"
              required
            />
            
            <div class="form-group">
              <label>留言内容</label>
              <textarea
                v-model="form.message"
                rows="5"
                placeholder="请输入您的留言内容"
                required
              ></textarea>
            </div>

            <div class="form-submit">
              <BaseButton 
                type="primary" 
                size="large"
                :disabled="isSubmitting"
              >
                {{ isSubmitting ? '提交中...' : '提交' }}
              </BaseButton>
            </div>

            <div v-if="submitSuccess" class="success-message">
              <i class="fas fa-check-circle"></i>
              提交成功！我们会尽快与您联系。
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.contact-page {
  .contact-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    
    @media (max-width: 992px) {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
  }
  
  .contact-info {
    .info-card {
      background: var(--bg-color);
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      margin-bottom: 2rem;
    }
    
    .info-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 2rem;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      i {
        font-size: 1.5rem;
        color: var(--primary-color);
        margin-right: 1rem;
        width: 40px;
        height: 40px;
        background: rgba(66, 184, 131, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .info-text {
        h3 {
          margin-bottom: 0.5rem;
          color: var(--text-color);
        }
        
        p {
          color: var(--secondary-color);
        }
      }
    }
    
    .map-container {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      
      img {
        width: 100%;
        height: 300px;
        object-fit: cover;
      }
    }
  }
  
  .contact-form-container {
    background: var(--bg-color);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    
    h2 {
      margin-bottom: 2rem;
      text-align: center;
      color: var(--text-color);
    }
  }
  
  .contact-form {
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1rem;
      
      @media (max-width: 576px) {
        grid-template-columns: 1fr;
      }
    }
    
    .form-group {
      margin-bottom: 1.5rem;
      
      label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: var(--text-color);
      }
      
      textarea {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        resize: vertical;
        background: var(--bg-color);
        color: var(--text-color);
        
        &:focus {
          outline: none;
          border-color: var(--primary-color);
          box-shadow: 0 0 0 2px rgba(66, 184, 131, 0.2);
        }
      }
    }
    
    .form-submit {
      text-align: center;
      margin-top: 2rem;
    }
    
    .success-message {
      margin-top: 1rem;
      padding: 1rem;
      background: #e6f7e6;
      color: #2e7d32;
      border-radius: 8px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      
      i {
        font-size: 1.2rem;
      }
    }
  }
}
</style>